<template>
    <div class='application-container'>
        <!-- <MainLayout />
        <BlankLayout /> -->
        <component :is="layoutName" />
    </div>
</template>

<script>
export default {
    watch: {
        menus(val) {
            let menuList = val.filter(it => !!it.path)
            let routes = menuList.map(it => {
                // ./home => it.path === '/home'
                return {path: it.path, component: (() => import('.' + it.path))}
            })
            this.$router.addRoutes(routes)
        }
    },
    computed: {
        layoutName() {
            // 根据不同的路由可以确认不同页面的展示情况 -- 路由可以传参，其中meta参数定义后就不可以修改
            // 所以可以在meta中定义当前页面的路由容器组件
            return this.$route.meta.layout || 'MainLayout'
        },
        menus() {
            return this.$store.getters['common/menuList']
        }
    }
}
</script>